<template>
  <div class="list" v-loading="loading">
    <div class="box">
      <div class="conditions clear">
        <el-form :inline="true" ref="searchForm" class="clear">
          <el-form-item>
            <el-cascader
              :props="regionProps"
              placeholder="区域"
              v-model="condition.region"
              :options="regionList"
            ></el-cascader>
          </el-form-item>
          <el-form-item class="right">
            <el-button type="primary" @click="geo" style="width: 86px"
              >搜 索</el-button
            >
            <el-button @click="resetForm('searchForm')" style="width: 86px"
              >重 置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <a-map
        :city="city"
        :center="center"
        :markers="markers"
        @change="handleMapChange"
      />
      <div class="analysis">
        <div class="top-line">
          <p class="icon">
            <ali-icon icon="iconshujufenxi" color="#0076FE" :size="18" />
          </p>
          <p class="title">实时统计</p>
          <p class="small-title">统计结果包含标签、文本、POI的多重过滤。</p>
        </div>
        <div class="foot-line">
          <div>
            <div class="type">企业统计数</div>
            <div class="bottom">
              <div class="count" v-text="total"></div>
              <div class="unit">家</div>
              <div class="circle orange">
                <ali-icon color="#fff" icon="iconqiye-tianchong" :size="24" />
              </div>
            </div>
          </div>
          <div>
            <div class="type">企业类型</div>
            <div class="bottom">
              <div class="count" v-text="company_num"></div>
              <div class="unit">个</div>
              <div class="circle green">
                <ali-icon
                  color="#fff"
                  icon="iconcaigouleixingzhanbi"
                  :size="24"
                />
              </div>
            </div>
          </div>
          <div class="btn-grp">
            <div>
              <el-button type="primary" style="width: 100%" @click="goDetail"
                >查看明细</el-button
              >
            </div>
            <div>
              <el-button style="width: 100%" type="primary" @click="goAnalysis"
                >多维度分析</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api/companyMap";
import AMap from "./components/map";
import { fetchIndustry, fetchRegion } from "@/api/index";
export default {
  data() {
    return {
      condition: {
        region: {},
        lat: "",
        lng: "",
        radius: "",
      },
      regionProps: {
        label: "cityname",
        value: "cityname",
        children: "children",
      },
      regionList: [],
      loading: false,
      hello: "企业地图",
      TMap: null,
      map: null,
      that: null,
      markers: [],
      company_num:0,
      total:0,
      val:[],
      city: "",
      center:  [113.33876604768,22.94642311893] , //[113.33876604768,22.94642311893]
    };
  },
  watch: {
    "condition.region"(val) {
      console.log('wathch',val)
      let len = val.length;
      console.log(this.regionList)
      this.val=val
      let provinceIndex=this.regionList.findIndex((item)=>{
        return item.cityname==val[0]
      })
      console.log('index',provinceIndex)
      let cityIndex=this.regionList[provinceIndex].children.findIndex((item)=>{
         return item.cityname==val[1]
      })
           console.log('cityindex',cityIndex)
      let areaIndex=this.regionList[provinceIndex].children[cityIndex].children.findIndex((item)=>{
         return item.cityname==val[2]
      })
      console.log('area',areaIndex)
      let area =this.regionList[provinceIndex].children[cityIndex].children[areaIndex]
      this.center=[area.longitude, area.latitude],
      this.city = val[len - 1];
    },
  },
  components: { AMap },
  created() {
    this.fetchRegion();
  //  this.search();
  },
  methods: {
    geo(){
      let val=this.val
      console.log(this.regionList)
      this.val=val
      let provinceIndex=this.regionList.findIndex((item)=>{
        return item.cityname==val[0]
      })
      console.log('index',provinceIndex)
      let cityIndex=this.regionList[provinceIndex].children.findIndex((item)=>{
         return item.cityname==val[1]
      })
           console.log('cityindex',cityIndex)
      let areaIndex=this.regionList[provinceIndex].children[cityIndex].children.findIndex((item)=>{
         return item.cityname==val[2]
      })
      console.log('area',areaIndex)
      let area =this.regionList[provinceIndex].children[cityIndex].children[areaIndex]
      this.center=[area.longitude, area.latitude]
    },
    search() {
      this.loading = true;
      Api.fetchMapCompanies(
        {
          lat: this.condition.lat,
          lng: this.condition.lng,
          city: this.city,
          radius: this.condition.radius,
        },
        (res) => {
          this.loading = false;
          if (res.code == 200) {
            this.total=res.meta.total
            this.company_num=res.company_num
            let markers = res.data.map((item) => {
              return {
                position: [item.longitude, item.latitude],
                label: item.company_name,
              };
            });
            this.markers = markers;
            if (this.markers) {
              this.center = this.markers[0].position;
            }
          }
        },
        (err) => {
          this.loading = false;
        }
      );
    },
    handleMapChange(val) {
      console.log(val)
      this.condition.lat = val.center.lat;
      this.condition.lng = val.center.lng;
      this.condition.radius = val.radius;
      console.log('condition',this.condition)
      this.search();
    },
    fetchRegion() {
      fetchRegion(
        (res) => {
          if (res.code == 200) {
            this.regionList = res.data;
          }
        },
        (err) => {}
      );
    },
    drawed() {
      this.loading = false;
    },
    resetForm(formName) {
      this.markers=[]
      this.company_num=0
      this.total=0
    },
    goDetail() {
      if(this.total){
        this.$router.push({ name: "map/more/index",query:this.condition });
      }
   
    },
    goAnalysis() {
      if(this.total){
   this.$router.push({ name: "map/analysis/index",query:this.condition });
      }
   
    },
  },
};
</script>
<style lang="scss">
@import "@/styles/map/map/index.scss";
</style>

